<template>
    <div id="percom">
    <hr>
    <el-table :data="pageUsers" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}">
    <el-table-column prop="date"  label="日期"  sortable  width="180"></el-table-column>
    <el-table-column  prop="username"  label="姓名"  sortable  width="180"></el-table-column>
    <el-table-column  prop="percom"  label="评论"  ></el-table-column>
  </el-table>
  <el-pagination background layout="prev, pager, next"  :page-count="pageCount" @current-change="getPageData"></el-pagination>
    </div>
</template>
<style>
   #percom{
    width: 94%;
    margin-left: 10%;
   }
</style>
<script>
import Mock from 'mockjs'
export default {
  name: 'PercomView',
  data() {
    return {
      products: [],
      pageSize:10,
      //设置每页显示的记录数
      pageIndex:1
    }
  },
  methods:{
    getPageData($event){
        this.pageIndex = $event //获取当前选中的页码
    }
  },
  computed:{
    pageCount() {
      return Math.ceil(this.products.length / this.pageSize)
    },
    //通过计算属性获取指定页的数据
    pageUsers(){
        let tempProducts = []
        for (var i = (this.pageIndex - 1) * this.pageSize; i < this.pageIndex * this.pageSize; i++) {
            tempProducts.push(this.products[i])
        }
        console.log(tempProducts.length)
            return tempProducts
    }
  },
  created() {
    // let vp = []
    // for (var i = 0; i < 100; i++) {
    //   vp.push(Mock.mock({
    //     username: '@cname()',
    //     precom: '@cparagraph()',
    //     date: '@date(yyyy-MM-dd)',
    //   })
    //   )
    // }

    // Mock.mock('http://localhost:8080/percom',
    //   { vp });
    this.axios.get('/percom.json')
      .then((res) => {
        console.log('res:', res.data.data)
        this.products = res.data.data
      })
  }
}
    </script>